<template>
  <div class="wrap">
    <!-- 顶部   -->
    <div class="top">
      <div class="hosname">{{ info.hosname }}</div>
      <div class="line">|</div>
      <div class="">{{ info.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosdeparment">{{ info.depname }}</div>
    </div>
    <!-- 中间   -->
    <div class="center">
      <h1 class="time">2024-33-22</h1>
      <div class="container">
        <div
          v-for="(item, index) in bookingScheduleList"
          :key="index"
          :class="{
            active: item.status === -1 || item.availableNumber === -1,
            cur: item.workDate === workDate,
          }"
          class="item"
          @click="changeWorkingInfo(item)"
        >
          <div class="con_top">{{ item.workDate }}-{{ item.dayOfWeek }}</div>
          <div class="bottom">
            <div v-if="item.status === -1">停止预约</div>
            <div v-else-if="item.status === 0">
              {{
                item.availableNumber === -1
                  ? "已约满"
                  : `可约(${item.availableNumber})`
              }}
            </div>
            <div v-else>即将放号</div>
          </div>
        </div>
      </div>
      <!--  分页  -->
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="limit"
        v-model:total="total"
        class="page"
        layout="prev, pager, next"
        @change="getHospitalDepSubList"
        @current-change="getHospitalDepSubList"
      />
    </div>
    <!--  底部  -->
    <div class="bottom">
      <!-- 展示即将放号     -->
      <div v-if="workStatus === 1" class="will">
        <span>2024年6月27日09:52:51</span>
        <span>放号</span>
      </div>
      <!--  展示医生信息    -->
      <div v-else class="doctor">
        <!--  上午      -->
        <div class="morning">
          <div class="tip">
            <svg
              class="icon"
              height="32"
              p-id="4292"
              t="1719453546465"
              version="1.1"
              viewBox="0 0 1024 1024"
              width="32"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M904.101037 676.946871H118.670712c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h785.430325c15.461511 0 28.105271 12.643759 28.105271 28.10527s-12.607634 28.033021-28.105271 28.033021z m-56.029916-324.980738c-11.018133 10.945883-28.719396 10.945883-39.665279 0-11.018133-10.945883-11.018133-28.755521 0-39.665279l39.665279-39.665279a27.97522 27.97522 0 0 1 39.593029 0 27.93187 27.93187 0 0 1 0 39.665279l-39.593029 39.665279z m-62.279545 212.776406c-26.082269-128.027094-138.683977-224.444789-274.441826-224.44479-135.649474 0-248.287307 96.417696-274.369576 224.44479H177.915755c21.602766-158.263741 162.454244-280.583081 333.433995-280.583081 171.088125 0 311.903478 122.31934 333.506244 280.583081h-59.064418z m-274.441826-336.612997c-15.461511 0-28.033021-12.535384-28.033021-28.10527V143.95823c0-15.461511 12.535384-28.105271 28.033021-28.10527 15.569886 0 28.105271 12.643759 28.10527 28.10527v56.029916c0 15.606011-12.535384 28.141396-28.10527 28.141396zM174.700628 351.966133L135.035349 312.264729c-10.945883-10.945883-10.945883-28.755521 0-39.665279 11.018133-10.945883 28.719396-10.945883 39.665279 0l39.665279 39.665279a27.93187 27.93187 0 0 1 0 39.665279c-10.909758 10.982008-28.647146 10.982008-39.665279 0.036125z m-28.033021 381.119029h729.40041c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021H146.667607c-15.497636 0-28.033021-12.535384-28.03302-28.033021 0.036125-15.497636 12.571509-28.033021 28.03302-28.03302z m84.171312 112.168207h561.093911c15.497636 0 28.033021 12.535384 28.033021 28.033021 0 15.569886-12.535384 28.105271-28.033021 28.10527H230.838919c-15.497636 0-28.033021-12.535384-28.03302-28.10527 0-15.497636 12.535384-28.033021 28.03302-28.033021z"
                fill="#1296db"
                p-id="4293"
              ></path>
            </svg>
            <span class="text">上午号源</span>
          </div>
          <div v-for="doc in morningWorking" :key="doc.id" class="doc_info">
            <div class="left">
              <!--  医生信息            -->
              <div class="info">
                <span>{{ doc.title }}</span>
                <span>|</span>
                <span>{{ doc.docname }}</span>
              </div>
              <!-- 技能             -->
              <div class="skill">{{ doc.skill }}</div>
            </div>
            <div class="right">
              <div class="money">¥{{ doc.amount }}</div>
              <el-button size="default" type="primary" @click="toRegister(doc)"
                >预约({{ doc.availableNumber }})
              </el-button>
            </div>
          </div>
        </div>
        <!--     下午   -->
        <div class="morning">
          <div class="tip">
            <svg
              class="icon"
              height="32"
              p-id="6510"
              t="1719453608693"
              version="1.1"
              viewBox="0 0 1024 1024"
              width="32"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M166.4 712.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333l59.733333-59.733333c17.066667-17.066667 42.666667-17.066667 59.733334 0 17.066667 17.066667 17.066667 42.666667 0 59.733333l-59.733334 59.733333c-17.066667 17.066667-42.666667 17.066667-59.733333 0z m691.2 0c-17.066667 17.066667-42.666667 17.066667-59.733333 0l-59.733334-59.733333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733334 0l59.733333 59.733333c17.066667 17.066667 17.066667 42.666667 0 59.733333zM512 896c-25.6 0-42.666667-17.066667-42.666667-42.666667v-85.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667z m128-640H384c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h256c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667z m42.666667 170.666667H341.333333c0 93.866667 76.8 170.666667 170.666667 170.666666s170.666667-76.8 170.666667-170.666666z m85.333333 0c0 140.8-115.2 256-256 256s-256-115.2-256-256H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667h-128z"
                fill="#efb336"
                p-id="6511"
              ></path>
            </svg>
            <span class="text">下午号源</span>
          </div>
          <div v-for="doc in afterWorking" :key="doc.id" class="doc_info">
            <div class="left">
              <!--  医生信息            -->
              <div class="info">
                <span>{{ doc.title }}</span>
                <span>|</span>
                <span>{{ doc.docname }}</span>
              </div>
              <!-- 技能             -->
              <div class="skill">{{ doc.skill }}</div>
            </div>
            <div class="right">
              <div class="money">¥{{ doc.amount }}</div>
              <el-button size="default" type="primary" @click="toRegister(doc)"
                >预约({{ doc.availableNumber }})
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="RegisterStep" setup>
import { computed, onMounted, ref } from "vue";
import { doGetScheduleRule, doGetWorkingList } from "@/api/hosiptal";
import { useRoute } from "vue-router";
import { BaseMap, ReservationInfo, Doctor } from "@/types/types.ts";
import router from "@/router";

let route = useRoute();
let page = ref<number>(1);
let limit = ref<number>(6);
let total = ref<number>(0);
let hoscode = route.query.hoscode;
let depcode = route.query.depcode;
// 预约信息
let bookingScheduleList = ref<ReservationInfo[]>([]);
// 医院及科室信息
let info = ref<BaseMap>({} as BaseMap);
// 排班时间
let workDate = ref<string>("");
// 排班状态
let workStatus = ref<number>(0);
// 排班医生信息
let docList = ref<Doctor[]>([] as Doctor[]);
onMounted(() => {
  // 医院科室预约列表
  getHospitalDepSubList();
});

// 获取医院科室预约列表
async function getHospitalDepSubList() {
  await doGetScheduleRule(page.value, limit.value, hoscode, depcode).then(
    (res) => {
      if (res.code === 200) {
        bookingScheduleList.value = res.data.bookingScheduleList;
        info.value = res.data.baseMap;
        total.value = res.data.total;
        workDate.value = res.data.bookingScheduleList[0].workDate;
        workStatus.value = res.data.bookingScheduleList[0].status;
        // 排班
        getWorkingList();
      }
    },
  );
}

// 获取排班列表
async function getWorkingList() {
  await doGetWorkingList(hoscode, depcode, workDate.value).then((res) => {
    if (res.code === 200) {
      docList.value = res.data;
    }
  });
}

// 选择排班时间,获取排班表
const changeWorkingInfo = (item: any) => {
  workDate.value = item.workDate;
  workStatus.value = item.status;
  getWorkingList();
};

let morningWorking = computed(() => {
  return docList.value.filter((item: Doctor) => item.workTime === 0);
});
let afterWorking = computed(() => {
  return docList.value.filter((item: Doctor) => item.workTime === 1);
});
// 预约医生
const toRegister = (doc: Doctor) => {
  router.push({ name: "register_step2", query: { docId: doc.id } });
};
</script>

<style lang="scss" scoped>
.wrap {
  .top {
    display: flex;
    color: #7f7f7f;

    .line {
      margin: 0 5px;
    }

    .dot {
      margin: 0 10px;
    }
  }

  // 中间
  .center {
    color: #7f7f7f;
    display: flex;
    //justify-content: center;
    flex-direction: column;
    align-items: center;

    .time {
      font-weight: 900;
      margin-top: 50px;
    }

    .container {
      width: 100%;
      display: flex;
      margin: 50px 0;

      .item {
        flex: 1;
        border: 1px solid skyblue;
        margin: 0 5px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.5s;

        &.active {
          border: 1px solid #ccc;

          .con_top {
            background-color: #ccc;
          }
        }

        &.cur {
          transform: scale(1.1);
        }

        .con_top {
          background-color: #e8f2ff;
          width: 100%;
          height: 30px;
          text-align: center;
          line-height: 30px;
        }

        .bottom {
          width: 100%;
          height: 50px;
          text-align: center;
          line-height: 50px;
        }
      }
    }

    // 分页
    .page {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  // 底部
  .bottom {
    .will {
      text-align: center;
      font-size: 30px;
      font-weight: 900;
    }

    .doctor {
      .morning {
        .tip {
          display: flex;
          align-items: center;

          .text {
            color: #7f7f7f;
            font-weight: 900;
          }
        }

        .doc_info {
          display: flex;
          color: #7f7f7f;
          justify-content: space-between;
          margin-bottom: 10px;
          border-bottom: 1px solid #ccc;

          .left {
            .info {
              color: skyblue;

              span {
                margin: 0 5px;
                font-size: 18px;
                font-weight: 900;
              }
            }

            .skill {
              margin: 10px 0;
            }
          }

          .right {
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .money {
              font-weight: 900;
            }
          }
        }
      }

      .after {
      }
    }
  }
}
</style>
